<template>
  <div class="app-container">
    <button @click="handleChart('log')">对数坐标</button>
    <button @click="handleChart('line')">线图</button>
    <button @click="handleChart('bar')">柱图</button>
    <button @click="handleChart('raddar')">雷达图</button>

    <el-dialog :title="title" :visible.sync="logOpen" width="700px" append-to-body center>
      <log-chart :chart-data="loglineChartData" />
    </el-dialog>
    <el-dialog :title="title" :visible.sync="lineOpen" width="700px" append-to-body center>
      <line-chart :chart-data="lineChartData" />
    </el-dialog>

    <el-dialog :title="title" :visible.sync="raddarOpen" width="700px"  append-to-body center>
      <raddar-chart :chart-data="raddarChartData"/>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="barOpen" width="800px"  append-to-body center>
      <bar-chart :chart-data="barChartData"/>
    </el-dialog>

  </div>

</template>

<script>
import LineChart from './lineChart'
import LogChart from './loglineChart'
import RaddarChart from './RaddarChart'
import BarChart from './BarChart'
import { queryLineChartData ,queryResultDataList,saveComputeReusult,impFromExcelByMaterialType} from "@/api/business/datachart";

export default {
  // mixins: [resize],
  components: {
    LineChart,
    LogChart,
    RaddarChart,
    BarChart
  },
  data() {
    return {
      // 是否显示弹出层
      lineOpen: false,
      barOpen: false,
      raddarOpen: false,
      logOpen: false,
      loglineChartData: {
        dimensions: ['销售额', '数量'],
        source: [
            //X轴     //Y轴   //维度
            [1, 4862.4],
            [2, 5294.7],
            [3, 5934.5],
            [4, 7171.0],
            [5, 8964.4],
            [6, 10202.2],
            [7, 11962.5],
            [8, 14928.3],
            [9, 16909.2],
            [10, 18547.9],
            [11, 21617.8],
            [12, 26638.1],
            [13, 34634.4],
            [14, 46759.4],
            [15, 58478.1],
            [16, 67884.6],
            [17, 74462.6],
            [18, 79395.7]
        ],
      },
      lineChartData: {
        data: [
          [100, 120, 161, 134, 105, 160, 165],
          [120, 82, 91, 154, 162, 140, 145],,
        ],
        legend: ['类型a','类型b'],
        xdata: ['指标1', '指标2', '指标3', '指标4', '指标5', '指标6', '指标7']
      },
      barChartData: {
        ydata: [
          [100, 120, 161, 134, 105, 160, 165],
          [120, 82, 91, 154, 162, 140, 145],
          [80, 52, 200, 334, 390, 330, 220]
        ],
        legend: ['第一列名称', '第二列名称', '第三列名称'],
        xdata: ['第一行名称', '第二行', '第三行', '第四行', '第五行', '第六行', '第七行']
      },
      raddarChartData: {
        data: [
          [100, 2, 161, 134, 105, 160, 165],
          [120, 3, 91, 154, 162, 140, 145],
          [80, 4, 200, 334, 390, 330, 220]
        ],
        legend: ['第一行', '第二行', '第三行'],
        indicator: ['第一列', '第二列', '第三列','第四列', '第五列', '第六列'],
      },
      title: "线图"
    }
  },
  methods: {
    handleChart(type) {
      this.lineOpen = false
      this.logOpen = false
      this.barOpen = false
      this.raddarOpen = false
      if(type == "line"){
        this.lineOpen = true
        this.title = "线图"
        // this.lineChartData = JSON.parse(JSON.stringify(this.lineChartData))
        // console.log(this.lineChartData)


        // let params = {
        //   chartMap: JSON.stringify(this.lineChartData),
        //   sMap: 1
        // }
        // queryLineChartData(params).then(response => {
        //   this.lineChartData = response.data
        //   this.lineOpen = true
        //   this.title = "线图"
        // });

        //选择指标树-指标右侧初始化显示参数表头显示一条参数
        //http://localhost:8080/business/statistics/queryResultDataList
        // let params = {
        //   performanceTypeId: "550a23c7011a42fca763ef4d4d4fa43b",
        //   paramGuid: "3876c6d14a1c446c964613e931fb6e29",
        //   confidencelevel: 95,
        //   survivalrate: 65,
        //   paramMap: JSON.stringify({"smnd":10000000,"smnl":15000000}),
        //   psn: "1"
        // }
        // queryResultDataList(params).then(response => {
        //   console.log( response.data)
        // });

        //计算结果表格数据修改后，保存入库
        //http://localhost:8080/business/statistics/saveComputeReusult
        // let params = {
        //   performanceTypeId: "550a23c7011a42fca763ef4d4d4fa43b",
        //   resultDataMapList: JSON.stringify([{"rowguid":"2","C1":"3","C2":"3","C3":"3","m1":"22","m2":"2"}])
        // }
        // saveComputeReusult(params).then(response => {
        //   console.log( response.data)
        // });

        //按性能分类导入
        //http://localhost:8080/business/materialtest/impFromExcelByMaterialType
        // var file = new File(['Hello', '\n World'], 'hello-world.txt', {type: 'text/plain'})
        // let params = {
        //   file: file,
        //   materialTypeId: "123123123",
        //   flag:"11111"
        // }
        // impFromExcelByMaterialType(formData).then(response => {
        //   console.log( response.data)
        // });
      }
      if(type == "bar"){
        this.barOpen = true
        this.title = "柱图"
      }
      if(type == "raddar"){
        this.raddarOpen = true
        this.title = "雷达图"
      }
      if(type == "log"){
        this.logOpen = true
        this.title = "对数坐标图"
      }

    }
  }
}
</script>
